<template>
  <el-dialog width="900px" :title="record.title" :visible.sync="record.dialogVisible" :fullscreen="fullscreenFlag"
             :before-close="cancel">
    <i class="el-icon-copy-document fullScreenIcon" v-if="fullscreenFlag" @click="fullSreenFn(false)"></i>
    <i class="el-icon-full-screen fullScreenIcon" v-else @click="fullSreenFn(true)"></i>
    <div>
      <h3>运输计划</h3>
      <el-table v-loading="loading" :border="true" :data="[obj]" style="width: 100%;height: auto;">
        <el-table-column width="100" label="发车日期" align="center" prop="departDate"/>
        <el-table-column width="100" label="提货日期" align="center" prop="pickDate"/>
        <el-table-column width="120" label="线路" align="center" prop="transportLine"/>
        <el-table-column width="120" label="供应商" align="center" prop="supplier"/>
        <el-table-column width="80" label="物品数" align="center" prop="goodsNum"/>
        <el-table-column width="80" label="单位" align="center" prop="goodsUnit"/>
        <el-table-column width="300" label="货物尺寸" align="center" prop="goodsSize"/>
        <el-table-column width="80" label="吨位" align="center" prop="goodsWeight"/>
        <el-table-column width="" label="备注" align="center" prop="remark"/>
        <el-table-column fixed="right" width="80" label="状态" align="center" prop="carHeight">
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.transport_plan_status"
              :value="scope.row.status"
            />
          </template>
        </el-table-column>
      </el-table>
      <div class="card">
        <el-timeline>
          <el-timeline-item icon="el-icon-location-outline" timestamp="发货方" placement="top">
            <div>发货方姓名：<span class="x2color">{{ obj.deliverName }}</span></div>
            <div class="flex-layout">
              <div>发货方电话：<span class="x2color">{{ obj.deliverMobile }}</span></div>
              <div class="address">发货方地址：<span class="x2color">{{ obj.deliverAddress }}</span></div>
            </div>
          </el-timeline-item>
          <el-timeline-item icon="el-icon-location-outline" timestamp="收货方" placement="top">
            <div>收货方姓名：<span class="x2color">{{ obj.arrivalName }}</span></div>
            <div class="flex-layout">
              <div>收货方电话：<span class="x2color">{{ obj.arrivalMobile }}</span></div>
              <div class="address">收货方地址：<span class="x2color">{{ obj.arrivalAddress }}</span></div>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
      <h3>司机调度情况</h3>
      <div class="marginView">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增司机</el-button>
        <el-button type="primary" plain icon="el-icon-minus" size="mini" @click="handleDelete">删除司机</el-button>
      </div>
      <el-table ref="multipleTable" :data="driverList" tooltip-effect="dark" style="width: 100%"
                @selection-change="handleSelectionChange" :row-class-name="tableRowClassName">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column width='75' label="司机姓名" align="center" prop="name"/>
        <el-table-column width='80' label="车牌号码" align="center" prop="carName"/>
        <el-table-column width='120' label="司机电话" align="center" prop="mobile"/>
        <el-table-column fixed="right" width='100' label="分配数量" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.goodsNum" type="number"></el-input>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="备注" align="center">
          <template slot-scope="scope">
            <el-input type="text" v-model="scope.row.remark"></el-input>
          </template>
        </el-table-column>
      </el-table>
      <div class="allNumContainer">
        <div></div>
        <h3 class="allNum">汇总：{{ getCount() }}</h3>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
    <Driver :multipleSelection="driverList" :innerVisible="innerVisible" @reset="reset"></Driver>
  </el-dialog>
</template>

<script>
import {assignDriver, getAssignPlanDetail} from '@/api/tms/plan.js'
import Driver from './driver.vue'

export default {
  dicts: ['transport_plan_status'],
  data() {
    return {
      fullscreenFlag: false,
      loading: true,
      obj: {},
      driverList: [],
      innerVisible: false,
      selectList: []
    }
  },
  props: {
    record: Object
  },
  watch: {
    'record.dialogVisible': {
      deep: true,
      handler: function (newV, oldV) {
        if (newV) {
          this.getPlanDetailMsg()
        }
      }
    }
  },
  components: {
    Driver
  },
  methods: {
    change(){
      this.$forceUpdate();
    },
    /** 获取计划详情 */
    getPlanDetailMsg() {
      getAssignPlanDetail(this.record.id).then(response => {
        this.obj = response.data;
        this.driverList = response.data.carTransports || [];
        if (this.driverList) {
          this.driverList.forEach(e => {
            e.carName = e.carNumber;
            e.name = e.driverName
            e.mobile = e.driverMobile
          })
        }
        this.loading = false;
      })
    },
    /** 获取司机列表 */
    handleAdd() {
      this.innerVisible = true;
    },
    /** 删除司机 */
    handleDelete() {
      if (!this.selectList.length) {
        this.$modal.msgError("请选择要删除的司机");
      } else {
        for (var i = 0; i < this.driverList.length; i++) {
          for (var j = 0; j < this.selectList.length; j++) {
            if (this.driverList[i].carId == this.selectList[j].carId) {
              this.driverList.splice(i, 1);
            }
          }
        }
      }
    },
    // 表单隔行变色
    tableRowClassName({row, rowIndex}) {
      if (rowIndex % 2 == 1) {
        return "success-row";
      } else {
        return "warning-row";
      }
    },
    //汇总货物
    getCount() {
      let allNum = 0;
      this.driverList.forEach(e => {
        allNum = Number(allNum) + Number(e.goodsNum)
      })
      return allNum
    },
    reset(item) {
      this.innerVisible = false;
      if (item) {
        this.driverList = item;
        this.driverList.forEach(element => {
          if (typeof element.goodsNum == 'undefined') {
            this.$set(element, 'goodsNum', '0')
          }
          if (typeof element.remark == 'undefined') {
            this.$set(element, 'remark', '')
          }
        });
      }

    },
    handleSelectionChange(val) {
      this.selectList = val
    },
    cancel() {
      this.$emit('refresh')
    },
    submitForm() {
      if (!this.driverList.length) {
        this.$modal.msgError("请选择要调度的司机");
      } else {
        let list = [];
        this.driverList.forEach(e => {
          list.push({
            carId: e.carId,
            carNumber: e.carName,
            driverName: e.name,
            driverMobile: e.mobile,
            departDate: this.obj.departDate,
            pickDate: this.obj.departDate,
            transportLine: this.obj.transportLine,
            supplier: this.obj.supplier,
            goodsUnit: this.obj.goodsUnit,
            goodsNum: e.goodsNum,
            remark: e.remark
          })

        })
        let data = {
          transportPlanId: this.record.id,
          tasks: list
        }
        assignDriver(data).then(res => {
          this.$modal.msgSuccess("调度成功");
          this.$emit('refresh')
        })
      }
    },
    fullSreenFn(e) {
      this.fullscreenFlag = e
    }
  }
}
</script>

<style lang="scss">
.fullScreenIcon {
  position: absolute;
  top: 20px;
  right: 40px;
  padding: 0;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 16px;

}

.fullScreenIcon:hover {
  color: #409eff;
}

.el-timeline-item__node {
  background-color: transparent !important;
}

.el-icon-location-outline {
  color: #1890ff;
  font-size: 20px;
}

.allNumContainer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0px;

  .allNum {
    width: 100px;
    text-align: center;
    font-weight: bold;
    margin-right: 200px;
  }
}

.card {
  margin: 20px 0px;
}

.x2color {
  color: #606266;
}

.flex-layout {
  display: flex;
  align-items: center;

  div {
    width: 200px;
    padding: 5px 0px;
  }

  .address {
    min-width: 300px !important;
  }
}

.el-timeline-item__timestamp,
.is-top {
  font-size: 1.17em;
  color: #202020;
}

.el-timeline-item__content {
  margin: 5px 0px !important;

  div {
    padding: 5px 0px;
  }
}

.marginView {
  margin: 1em 0;
}

.el-timeline {
  padding: 0px !important;
}
</style>
